<template>
  <el-row class="mySelTime" style="padding:10px;width: 100%;">
    <!-- 城市 -->
    <el-select v-if="showCity" style="width:100px" v-model="cityId" @change="onChangeCity">
      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
      </el-option>
    </el-select>
    <!-- 区域 -->
    <el-select v-if="showArea" style="width:100px"  v-model="areaDefault" @change="onChangeArea">
      <el-option v-for="item in areaArr" :key="item.id" :label="item.name" :value="item.id">
      </el-option>
    </el-select>
    <!-- 门店 -->
    <el-select v-if="showStore" style="width:100px" :disabled="storeDisabled" v-model="storeDefault" @change="onChangeStore">
      <el-option v-for="item in storeArr" :key="item.id" :label="item.name" :value="item.id">
      </el-option>
    </el-select>
    <div class="dateScope" style="display:inline">
    <el-date-picker  @change="changeTime" v-model="gTime" type="daterange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
    </el-date-picker>
    </div>
  </el-row>
</template>
<script>
import { GetAllRegion, GetAllStoreByAreaId } from "@/api/flh/home";
export default {
  props: {
    val: {
      type: String,
      default: () => {
        return "";
      }
    },
    districtId: {
      type: String,
      default: () => {
        return "";
      }
    },
    storeId: {
      type: String,
      default: () => {
        return "";
      }
    },
    cityId: {
      // 城市id ,洛阳或者郑州
      type: Number,
      default: () => {
        return 36001;
      }
    }
  },
  computed: {
    checkState() {}
  },
  data() {
    return {
      showCity: false,
      showArea: false,
      showStore: false,
      cityDisabled: false, // 城市是否禁用
      areaDisabled: false, // 区域
      storeDisabled: false, // 门店
      value: 36001,
      gTime: [],
      options: [
        {
          value: 36001,
          label: "洛阳市"
        },
        {
          value: 36002,
          label: "郑州市"
        }
      ],
      areaDefault: "0",
      areaArr: [],
      storeDefault: "0",
      storeArr: [], // 门店
      screenObj: {
        // 返回给父组件的数据
        gTime: [],
        city: {
          name: "",
          id: ""
        },
        area: {
          name: "",
          id: ""
        },
        store: {
          name: "",
          id: ""
        }
      }
    };
  },
  mounted() {
    this.fetchData();
  },
  watch: {
    storeId(res) {
      this.onChangeStore(res);
    }
  },
  methods: {
    // 获取门店
    async fetchStore() {
      var self = this;
      var resScreen = this.getLocalStorage();
      var params = {}
      if (resScreen) {
        params = {
          districtId: resScreen.area.id
        };
      } else {
        params = {
          districtId: self.areaArr[0].id
        };
      }

      try {
        var res = await GetAllStoreByAreaId(params);
        if (res.data.code === "0") {
          var resData = res.data.result;
          self.storeArr = resData;
          var gTime = []
          if (resScreen != null) {
            var storeName = "";
            gTime[0] = self.$utils.formateDate(resScreen.gTime[0]);
            gTime[1] = self.$utils.formateDate(resScreen.gTime[1]);
            self.$set(self, "gTime", gTime);
            self.value = "0";
            self.areaDefault = resScreen.area.id ? resScreen.area.id : "0";
            self.storeDefault = resScreen.store.id
              ? resScreen.store.id
              : self.storeArr[0].id;
            self.storeArr.forEach(item => {
              if (self.storeDefault === item.id) {
                storeName = item.name;
              }
            });
            resScreen.store.id = self.storeDefault;
            resScreen.store.name = storeName;
            self.setLocalStorage(resScreen);
            self.$store.dispatch("setScreenObj", resScreen);
            resScreen.cityId = this.cityId;
            self.$emit("onChangeTime", resScreen);
          } else {
            gTime[0] = self.$utils.formateDate("2018-1-1");
            gTime[1] = new Date();
            self.$set(self, "gTime", gTime);
            self.value = "0";
            resScreen = this.screenObj;
            resScreen.gTime[0] = "2018-1-1";
            resScreen.gTime[1] = this.$utils.parseTime(new Date());
            resScreen.store.id = self.storeArr[0].id;
            resScreen.store.name = self.storeArr[0].name;
            self.areaDefault = self.areaArr[0].id;
            self.storeDefault = resData[0].id;
            self.setLocalStorage(resScreen);
            self.$store.dispatch("setScreenObj", resScreen);
            resScreen.cityId = this.cityId;
            self.$emit("onChangeTime", resScreen);
          }
          self.initView();
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 改变城市选择
    onChangeCity(res) {
      var screenObj = this.getLocalStorage();
      screenObj.cityId = res;
      this.areaArr = [] // 清空数据
      this.setLocalStorage(screenObj);
      this.initScreen();
      this.fetchData()
    },
    // 改变门店选择
    onChangeStore(res) {
      var screenObj = this.getLocalStorage();
      screenObj.store.id = res;
      this.storeArr.forEach(item => {
        if (res === item.id) {
          screenObj.store.name = item.name;
        }
      });
      this.setLocalStorage(screenObj);
      this.initScreen();
    },
    // 改变区域触发事件{}
    onChangeArea(res) {
      var screenObj = this.getLocalStorage();
      screenObj.area.id = res;
      this.areaArr.forEach(item => {
        if (res === item.id) {
          screenObj.area.name = item.name;
        }
      });
      this.setLocalStorage(screenObj);
      this.initScreen();
    },
    // 获取区域
    async fetchData() {
      var self = this;
      try {
        var params = {
          cityId: this.cityId
        };
        var res = await GetAllRegion(params);
        if (res.data.code === "0") {
          var resData = res.data.result;
          self.areaArr = self.areaArr.concat(resData);
          this.initScreen();
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 判断那个组件显示隐藏
    initView() {
      switch (this.val) {
        case "1":
          this.$set(this, "showCity", true);
          break;
        case "2":
          this.cityDisabled = true;
          this.$set(this, "showCity", true);
          this.$set(this, "showArea", true);
          this.$set(this, "areaDisabled", false);
          break;
        case "3":
          this.cityDisabled = true;
          this.areaDisabled = true;
          this.$set(this, "showCity", true);
          this.$set(this, "showArea", true);
          this.$set(this, "showStore", true);
          break;

        default:
          break;
      }
    },
    changeTime(res) {
      var screenObj = this.getLocalStorage();
      screenObj.gTime[0] = this.$utils.parseTime(res[0]);
      screenObj.gTime[1] = this.$utils.parseTime(res[1]);
      screenObj.cityId = this.cityId;
      // 保存当前时间，触发返回时间
      this.setLocalStorage(screenObj);
      this.$emit("onChangeTime", screenObj);
    },
    emit(res) {
      // 集中触发事件
      var screenObj = JSON.parse(this.$localStorage.get("screenObj"));
      screenObj.gTime[0] = this.$utils.formateDate(this.screenObj.gTime[0]);
      screenObj.gTime[1] = this.$utils.formateDate(this.screenObj.gTime[1]);
      screenObj.cityId = this.cityId;
      this.screenObj = screenObj;
      this.$store.dispatch("setScreenObj", screenObj);
      this.$emit("onChangeSel", this.screenObj);
    },
    initScreen() {
      // 获取时间
      // 获取城市，区域，门店
      // 时间(存的时候把标准时间转化为string)
      var screenObj = this.getLocalStorage();
      var self = this;

      if (screenObj) {
        // 区域
        if (this.districtId !== "" && this.districtId !== undefined) {
          screenObj.area.id =
            this.areaDefault !== "0" ? this.areaDefault : self.districtId;
          if (this.areaDefault === "0") {
            self.areaArr.forEach(item => {
              if (self.districtId === item.id) {
                screenObj.area.name = item.name;
              }
            });
            screenObj.area.id = self.districtId;
          } else {
            screenObj.area.id = self.areaDefault;
          }
          // 获取门店
          this.setLocalStorage(screenObj);
          self.fetchStore();
        } else {
          screenObj.area.id = screenObj.area.id
            ? screenObj.area.id
            : this.areaArr[0].id;
          screenObj.area.name = screenObj.area.name
            ? screenObj.area.name
            : this.areaArr[0].name;
          if (this.val === "2") {
            screenObj.store.name = "";
            screenObj.store.id = "";
          }
          // 获取门店
          this.setLocalStorage(screenObj);
          self.fetchStore();
        }
      } else {
        this.fetchStore();
      }
    },
    // 设置到本地
    setLocalStorage(res) {
      this.$localStorage.set("screenObj", JSON.stringify(res));
    },
    getLocalStorage(res) {
      return JSON.parse(this.$localStorage.get("screenObj"));
    }
  }
};
</script>
<style>
@import "../../styles/element-ui/date/dateScope.css";
@import "../../styles/element-ui/select.css";
</style>
